<!--
 * @Description: 
 * @Date: 2023-12-20 14:44:03
 * @LastEditTime: 2024-02-21 17:24:35
-->
<template>
  <div class="dbxxFigure">
    <div class="dbxFigure-search">
      <el-form
        ref="form"
        :model="form"
        label-width="70px"
        label-position="left"
      >
        <el-form-item label="届次选择">
          <el-select
            v-model="form.se_id"
            placeholder="请选择所在届次"
            style="width: 350px"
            @change="changeSession"
          >
            <el-option
              v-for="dict in sessionList"
              :key="dict.seId"
              :label="dict.label"
              :value="dict.seId"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="dbxxFigure-content">
      <div class="dbxxFigure-menuList">
        <div>所属代表团</div>
        <div
          v-for="(item, index) in delegationList"
          :class="{ 'menu-active': activeStep == item.deId, 'menu-item': true }"
          :key="index"
          @click="jump(item.deId)"
        >
          {{ item.name }}
        </div>
      </div>
      <div id="dbxxFigure-scroll" class="dbxxFigure-scroll">
        <div v-for="(key, index) in userList" :key="index" :id="`${index}item`">
          <p>
            {{ index | getDelegationName(delegationList) }}({{ key.length }})
          </p>
          <div class="dbxxFigure-userList">
            <div
              class="user-msg"
              v-for="(item, index) in key"
              :key="index"
              :id="item.userId"
              @click="handleDialog(item)"
            >
              <img v-lazy="baseUrl + item.avatar" />
              <!-- <div>
                <span>{{ item.username }}</span>
                <span>{{ item.delegation.name }}</span>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog width="70%" :visible.sync="centerDialogVisible">
      <manageInfo v-if="centerDialogVisible" :userId="userId"></manageInfo>
    </el-dialog>
  </div>
</template>

<script>
import manageInfo from "../dbxxManage/manageInfo";
import { addSessionList } from "@/api/dbxx/dbxxLevel/index";
import { addDelegationList } from "@/api/dbxx/dbxxgroup/index";
import axios from "axios";
import _ from "lodash";
import { groupByDe } from "@/api/dbxx/dbxxgroup/index";
export default {
  name: "DbxxFigure",
  components: {
    manageInfo,
  },
  data() {
    return {
      form: {
        region: "",
      },
      countyList: [],
      userList: [],
      offsetTopArr: [],
      activeStep: 0, // 默认选中的锚点的key值
      offsetTop: 0,
      sessionList: [],
      delegationList: [],
      centerDialogVisible: false,
      userId: null,
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  computed: {
    scrollFn() {
      // 防抖
      return _.debounce(this.scroll, 100);
    },
  },
  filters: {
    getDelegationName(value, delegationList) {
      let arr = delegationList.filter((item) => {
        return item.deId == value;
      });
      return arr[0]?.name;
    },
  },

  mounted() {
    // 监听滚动事件
    window.addEventListener("scroll", this.scrollFn, true);
    addSessionList().then((response) => {
      response.rows.forEach((item) => {
        item.label =
          item.area +
          `第${item.session}届人民代表大会` +
          `第${item.orderName}次会议` +
          `(${item.annual})`;
      });
      this.sessionList = response.rows;
      this.form.se_id = this.sessionList[0].seId;
      this.getList();
    });
    addDelegationList().then((response) => {
      this.delegationList = response.rows;
      this.activeStep = response.rows[0].deId;
    });
  },
  methods: {
    handleDialog(item) {
      this.userId = item.userId;
      this.centerDialogVisible = true;
    },
    /**
     * @description: 滚动事件修改锚点
     * @return {*}
     */
    scroll() {
      const box = document.getElementById("dbxxFigure-scroll");
      // 若当前设置的滚动高度大于实际滚动的高度，即为锚点跳转，不再设置选中的锚点
      if (this.offsetTop > box.scrollTop) {
        this.offsetTop = 0;
        return;
      }
      let totalH = 0;
      Object.keys(this.userList).some((anchor) => {
        let scrollItem = document.getElementById(anchor + "item");

        totalH = totalH + scrollItem.clientHeight - 100;
        let judge = box.scrollTop < totalH;
        if (judge) {
          this.activeStep = anchor;
          return true;
        }
      });
    },
    /**
     * @description: 点击锚点跳转
     * @param {*} id
     * @return {*}
     */
    jump(id) {
      this.activeStep = id; // 设置选中的锚点为当前点击的
      const box = document.getElementById("dbxxFigure-scroll");
      let scrollItem = document.getElementById(id + "item");
      if (!scrollItem) return;
      // 锚点对应的模块与最近的一个具有定位的祖宗元素顶部的距离
      this.offsetTop = scrollItem.offsetTop;
      box.scrollTo({
        top: scrollItem.offsetTop - 100,
        behavior: "smooth",
      });
    },
    /**
     * @description: 默认当届的代表团列表
     * @param {*} seId
     * @return {*}
     */
    getList(seId) {
      groupByDe({ seId: this.form.se_id }).then((response) => {
        this.userList = response.data;
      });
    },
    changeSession() {
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
.dbxxFigure {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 10px 20px;
  @include flex(y, start, start);
  &-content {
    width: 100%;
    flex: 1;
    @include flex(x);
    overflow: hidden;
  }
  &-menuList {
    min-width: 200px;
    padding: 20px;
    border: 1px solid #c5c8cf;
    // border: 1px solid #ebeef5;
    & > div:first-child {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #000000;
      text-align: center;
      margin-bottom: 20px;
    }
    & > .menu-item {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      padding: 0 20px;
      box-sizing: border-box;
      @include uniline;
    }
    & > .menu-item:nth-child(even) {
      background: #f2f2f2;
    }
    & > .menu-active {
      background: #f5d4d4 !important;
    }
  }
  &-userList {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;

    .user-msg {
      width: 100px;
      height: 150px;
      padding-top: 1px;
      text-align: center;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
        1px -1px 2px rgba(0, 0, 0, 0.1), -1px 1px 2px rgba(0, 0, 0, 0.1),
        -1px -1px 2px rgba(0, 0, 0, 0.1);
      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      & > div {
        width: 100%;
        @include flex(y, center, center);
        background: #efefef;
        padding: 5px 0;
        & > span {
          font-size: 18px;
          font-weight: bold;
          color: #000000;
          display: inline-block;
        }
        & > span:nth-child(2) {
          flex: 1;
          font-size: 12px;
          margin-top: 10px;
        }
      }
    }
  }
  .dbxxFigure-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;

    p {
      margin: 0 0 20px 0;
      position: relative;
    }
    & > div {
      margin-bottom: 20px;
    }
  }
}
</style>
